<?php
if ( !defined('IN_SEC') ){exit();}
?>
<?php include template("admin_header");?>
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>
<?php include template("admin_breadcrumb");?>
					</div>

					<div class="page-content">
						<div class="page-header">
							<h1><?php echo $_G['admincp']['actname']; ?><small><i class="icon-double-angle-right"></i><?php echo $_G['admincp']['optname']; ?></small></h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="row">
									<div class="col-sm-9">
										<div class="space"></div>

										<div id="calendar"></div>
									</div>

									<div class="col-sm-3">
										<div class="widget-box transparent">
											<div class="widget-header">
												<h4>Draggable events</h4>
											</div>

											<div class="widget-body">
												<div class="widget-main no-padding">
													<div id="external-events">
														<div class="external-event label-grey" data-class="label-grey">
															<i class="icon-move"></i>
															My Event 1
														</div>

														<div class="external-event label-success" data-class="label-success">
															<i class="icon-move"></i>
															My Event 2
														</div>

														<div class="external-event label-danger" data-class="label-danger">
															<i class="icon-move"></i>
															My Event 3
														</div>

														<div class="external-event label-purple" data-class="label-purple">
															<i class="icon-move"></i>
															My Event 4
														</div>

														<div class="external-event label-yellow" data-class="label-yellow">
															<i class="icon-move"></i>
															My Event 5
														</div>

														<div class="external-event label-pink" data-class="label-pink">
															<i class="icon-move"></i>
															My Event 6
														</div>

														<div class="external-event label-info" data-class="label-info">
															<i class="icon-move"></i>
															My Event 7
														</div>

														<label>
															<input type="checkbox" class="ace ace-checkbox" id="drop-remove" />
															<span class="lbl"> Remove after drop</span>
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
<?php include template("admin_footer");?>

		<!-- page specific plugin scripts -->
		<link rel="stylesheet" href="/static/ace/assets/css/fullcalendar.css" />
		<script src="/static/ace/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="/static/ace/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="/static/ace/assets/js/fullcalendar.min.js"></script>

		<!-- ace scripts -->

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			jQuery(function($) {
			
			/* initialize the external events
				-----------------------------------------------------------------*/
			
				$('#external-events div.external-event').each(function() {
			
					// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
					// it doesn't need to have a start or end
					var eventObject = {
						title: $.trim($(this).text()) // use the element's text as the event title
					};
			
					// store the Event Object in the DOM element so we can get to it later
					$(this).data('eventObject', eventObject);
			
					// make the event draggable using jQuery UI
					$(this).draggable({
						zIndex: 999,
						revert: true,      // will cause the event to go back to its
						revertDuration: 0  //  original position after the drag
					});
					
				});
			
				/* initialize the calendar
				-----------------------------------------------------------------*/
			
				var date = new Date();
				var d = date.getDate();
				var m = date.getMonth();
				var y = date.getFullYear();
			
				
				var calendar = $('#calendar').fullCalendar({
					 buttonText: {
						prev: '<i class="icon-chevron-left"></i>',
						next: '<i class="icon-chevron-right"></i>'
					},
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'month,agendaWeek,agendaDay'
					},
					events: 
					<?php echo json_encode($datas); ?>
					,
					editable: true,
					droppable: true, // this allows things to be dropped onto the calendar !!!
					drop: function(date, allDay) { // this function is called when something is dropped
						console.log('Dropped');
						// retrieve the dropped element's stored Event Object
						var originalEventObject = $(this).data('eventObject');
						var $extraEventClass = $(this).attr('data-class');
						// we need to copy it, so that multiple events don't have a reference to the same object
						var copiedEventObject = $.extend({}, originalEventObject);
						
						// assign it the date that was reported
						copiedEventObject.start = date;
						copiedEventObject.allDay = allDay;
						if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
						
						// render the event on the calendar
						// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
						$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
						
						// is the "remove after drop" checkbox checked?
						if ($('#drop-remove').is(':checked')) {
							// if so, remove the element from the "Draggable Events" list
							$(this).remove();
						}
						
					}
					,
					selectable: true,
					selectHelper: true,
					select: function(start, end, allDay) {
						var begin_date = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm:ss');
						var end_date = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm:ss');
						console.log(begin_date);

						bootbox.prompt("新的日程:", function(title) {
							if ( title ) {
								var data = {
									title : title,
									begin_date : begin_date,
									end_date : end_date
								};
								D.ajax.postdata('?action=schedule&operation=edit', data, function(json){
									if( !json.error ){
										calendar.fullCalendar('renderEvent',
											{
												id : json.opt.id,
												title: title,
												start: start,
												end: end,
												allDay: allDay
											},
											true // make the event "stick"
										);
									}else{
										bootbox.alert(json.data);
									}
								});
							}
						});
						calendar.fullCalendar('unselect');
					}
					,
					eventClick: function(event, jsEvent, view) {
						var begin_date = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd HH:mm:ss');
						var end_date = $.fullCalendar.formatDate(event.end, 'yyyy-MM-dd HH:mm:ss');
						var dataid = event.id;
						var data = {
							id : dataid,
							title : event.title,
							begin_date : begin_date,
							end_date : end_date
						}

						var form = $("<form class='form-inline'><label>改变日程 &nbsp;</label></form>");
						form.append("<input class='middle' autocomplete=off type=text value='" + event.title + "' /> ");
						form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> 保存</button>");
						
						var div = bootbox.dialog({
							message: form,
						
							buttons: {
								"delete" : {
									"label" : "<i class='icon-trash'></i> 删除日程",
									"className" : "btn-sm btn-danger",
									"callback": function() {
										calendar.fullCalendar('removeEvents' , function(ev){
											return (ev._id == event._id);
										})
									}
								} ,
								"close" : {
									"label" : "<i class='icon-remove'></i> 关闭",
									"className" : "btn-sm"
								} 
							}
			
						});
						
						form.on('submit', function(){
							event.title = form.find("input[type=text]").val();
							data.title = event.title;
							D.ajax.postdata('?action=schedule&operation=edit', data, function(json){
								if( json.error ){
									bootbox.alert(json.data)
								}else{
									calendar.fullCalendar('updateEvent', event);
									div.modal("hide");
								}
							});
							return false;
						});
						
						//console.log(calEvent.id);
						//console.log(jsEvent);
						//console.log(view);
			
						// change the border color just for fun
						//$(this).css('border-color', 'red');
			
					},
					eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 
						var begin_date = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd HH:mm:ss');
						var end_date = $.fullCalendar.formatDate(event.end, 'yyyy-MM-dd HH:mm:ss');
						var dataid = event.id;
						var data = {
							id : dataid,
							title : event.title,
							begin_date : begin_date,
							end_date : end_date
						}
						D.ajax.postdata('?action=schedule&operation=edit', data, function(json){
							if( json.error ){
								bootbox.alert(json.data)
								revertFunc();
							}
						});
					},
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
						var begin_date = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd HH:mm:ss');
						var end_date = $.fullCalendar.formatDate(event.end, 'yyyy-MM-dd HH:mm:ss');
						var dataid = event.id;
						var data = {
							id : dataid,
							title : event.title,
							begin_date : begin_date,
							end_date : end_date
						}
						D.ajax.postdata('?action=schedule&operation=edit', data, function(json){
							if( json.error ){
								bootbox.alert(json.data)
								revertFunc();
							}
						});
                    },
					
				});
			});
		</script>

</body>
</html>